import React from 'react';
import {useHistory} from 'react-router';
import Lazyload from 'react-lazyload'; 
import style from './TabItem.module.scss';
interface Iprops{
    currentCategory:{[key:string]:any}
}
const TabItem:React.FC<Iprops> = props=>{
    const history = useHistory();
    return <div className={style.tabItem}>
        <div className={style.img} style={{backgroundImage:`url(${props.currentCategory.wap_banner_url})`}} >
            {props.currentCategory.front_desc}
        </div>
        <div className={style.title}>
            —— {props.currentCategory.name}分类  ——
        </div>
        <div className={style.content}>
        {
            props.currentCategory.subCategoryList&&props.currentCategory.subCategoryList.map((item:any)=>{
                return <dl 
                key={item.id} 
                className={style.item}
                onClick={()=>history.push(`/category/${item.id}`)}
                >
                    <dt>
                        <Lazyload
                        overflow={true}
                        >
                            <img src={item.wap_banner_url} alt=""/>
                        </Lazyload>
                    </dt>
                    <dd>{item.name}</dd>
                </dl>
            })
        }
        </div>
    </div>
}

export default TabItem
